<template>
    <div>
        <page-main>
            <!-- tabs -->
            <el-tabs v-model="search.group_status" type="card" class="demo-tabs" @tab-click="getList">
                <el-tab-pane label="全部商机" name="0" />
                <el-tab-pane label="跟进中商机" name="1" />
                <el-tab-pane label="赢单商机" name="2" />
                <el-tab-pane label="输单商机" name="3" />
            </el-tabs>
            <!-- 筛选栏 -->
            <search-bar>
                <el-form :model="search" size="small" label-width="100px">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="商机分组">
                                <el-select v-model="search.user_type" clearable placeholder="请选择商机分组">
                                    <el-option label="全部商机" :value="''" />
                                    <el-option label="我的商机" :value="1" />
                                    <el-option label="团队商机" :value="2" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="商机名称">
                                <el-input v-model="search.keys" placeholder="请输入商机名称" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="客户">
                                <el-input v-model="search.user" placeholder="请输入客户名" clearable />
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="6">
                            <el-form-item label="订单类型">
                                <el-select v-model="search.order_type" placeholder="请选择类型">
                                    <el-option label="体验" :value="1" />
                                    <el-option label="新购" :value="2" />
                                    <el-option label="复购" :value="3" />
                                    <el-option label="增购" :value="4" />
                                </el-select>
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="6">
                            <el-form-item label="订单状态">
                                <el-select v-model="search.status" clearable placeholder="请选择状态">
                                    <el-option label="匹配方案" :value="0" />
                                    <el-option label="强调优势" :value="1" />
                                    <el-option label="签订合同" :value="2" />
                                    <el-option label="进行审批" :value="3" />
                                    <el-option label="银行放款" :value="4" />
                                    <el-option label="回款" :value="5" />
                                    <el-option label="赢单" :value="6" />
                                    <el-option label="输单" :value="7" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="跟进人">
                                <el-select v-model="search.member_id" clearable placeholder="请选择跟进人">
                                    <el-option v-for="(item, index) in memberList" :key="index" :label="item.realname" :value="item.id" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="签约日期">
                                <el-date-picker
                                    v-model="search.date"
                                    type="daterange"
                                    range-separator="-"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    @change="handleDateChange"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="门店">
                                <el-select v-model="search.mendian_id" placeholder="请选择线门店" clearable>
                                    <el-option v-for="item, index in dict.mendianList" :key="index" :label="item.name" :value="item.id" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="关注">
                                <el-select v-model="search.is_like" placeholder="请选择关注">
                                    <el-option label="全部" value="0" />
                                    <el-option label="已关注" value="1" />
                                    <el-option label="未关注" value="2" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item>
                                <el-button type="primary" @click="getList">查询</el-button>
                                <el-button @click="handleReset">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </search-bar>
        </page-main>
        <page-main>
            <!-- <div class="number-card">
                <div class="item">
                    <div class="title">商机数</div>
                    <div class="number">{{ count }}</div>
                </div>
                <div class="item">
                    <div class="title">商机预估放款金额(元)</div>
                    <div class="number">{{ loan }}</div>
                </div>
                <div class="item">
                    <div class="title">商机预测回佣总金额(元)</div>
                    <div class="number">{{ commission }}</div>
                </div>
            </div> -->
            <!-- 批量操作 -->
            <div style="margin-bottom: 20px;">
                <el-button type="primary" size="small" @click="add">新建</el-button>
                <el-button size="small" type="danger" plain @click="del">删除</el-button>
            </div>
            <!-- 表格 table -->
            <el-table ref="table" v-loading="loading" :data="dataList" border stripe highlight-current-row @selection-change="selectionDataList = $event">
                <el-table-column fixed type="selection" width="40" />
                <el-table-column fixed prop="name" label="关注" align="center" width="50">
                    <template #default="scope">
                        <i v-if="scope.row.is_like" class="el-icon-star-on" style="font-size: 28px; color: #ffc958; cursor: pointer;" @click="handleLike(scope.row)" />
                        <i v-else class="el-icon-star-off" style="font-size: 24px; color: #ddd; cursor: pointer;" @click="handleLike(scope.row)" />
                    </template>
                </el-table-column>
                <el-table-column fixed prop="name" label="商机名称" width="180">
                    <template #default="scope">
                        <el-button type="text" size="small" @click="detail(scope.row)">{{ scope.row.name }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="commission" label="预计回佣金额" width="110" />
                <el-table-column prop="member" label="跟进人" width="140" />
                <el-table-column prop="user_name" label="客户名称" width="160">
                    <template #default="scope">
                        <el-button type="text" size="small" @click="userDetail(scope.row)">{{ scope.row.user_name }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="user_phone" sortable label="手机号" width="120" />
                <el-table-column prop="loan" sortable label="预估放款金额" width="140">
                    <template #default="scope">
                        <span>{{ scope.row.loan + '万元' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="times" sortable label="预计签单日期" width="160" />
                <el-table-column prop="status" label="商机阶段">
                    <template #default="scope">
                        <span>{{ scope.row.status | statusFilter }}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="" sortable label="商机阶段组" /> -->
                <el-table-column prop="times" label="最近跟进时间" width="160" />
                <el-table-column prop="updated" sortable label="最新更新时间" width="140" />
                <el-table-column prop="create_member" label="创建人" />
                <el-table-column prop="created" sortable label="创建时间" width="140" />
            </el-table>
            <!-- 分页 -->
            <div style="margin-top: 20px; text-align: right;">
                <el-pagination
                    :current-page="search.pages"
                    :page-size="search.limit"
                    :total="search.total"
                    :page-sizes="[10, 20, 50, 100]"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </page-main>
        <!-- 新增 -->
        <add-dialog ref="userAdd" @success="getList" />
        <!-- 商机详情 -->
        <detail-drawer ref="detailDrawer" @success="getList" />
        <!-- 客户详情 -->
        <user-detail-drawer ref="userDetailDrawer" @success="getList" />
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { businessList, delBusiness } from '@/api/business'
import { memberList } from '@/api/system'
import { star } from '@/api/common'
import AddDialog from './components/AddDialog'
import DetailDrawer from './components/DetailDrawer'
import UserDetailDrawer from '../custom/components/DetailDrawer'
export default {
    name: 'BusinessList',
    components: {
        AddDialog,
        DetailDrawer,
        UserDetailDrawer
    },
    filters: {
        statusFilter(val) {
            const map = {
                '0': '匹配方案',
                '1': '强调优势',
                '2': '签订合同',
                '3': '进行审批',
                '4': '银行放款',
                '5': '回款',
                '6': '赢单',
                '7': '输单'
            }
            return map[val]
        }
    },
    data() {
        return {
            loading: false,
            search: {
                user_type: '',
                keys: '',
                user: '',
                status: '',
                member_id: '',
                date: [],
                start_time: '',
                end_time: '',
                mendian_id: '',
                is_like: '0',
                pages: 1,
                limit: 10,
                total: 0
            },
            memberList: [],
            dataList: [],
            count: 0,
            loan: 0,
            commission: 0,
            selectionDataList: [],
            addDialogVisible: false
        }
    },
    computed: {
        ...mapState(["dict"])
    },
    mounted() {
        this.getOptions();
        this.getList();
    },
    methods: {
        detail(row) {
            this.$refs.detailDrawer.showDialog(row, this.search); 
        },
        userDetail(row) {
            this.$refs.userDetailDrawer.showDialog({id: row.user_id}, this.search); 
        },
        // 新建
        add() {
            this.$refs.userAdd.showDialog();
        },
        // 删除
        del() {
            if (this.selectionDataList.length > 0) {
                this.$alert('确定将选中商机删除？', '提示', {
                    confirmButtonText: '确定',
                    showCancelButton: true,
                    callback: action => {
                        if (action == 'confirm') {
                            let ids = this.selectionDataList.map(item => {
                                return item.id
                            })
                            delBusiness({ids: ids.join(',')}).then(res => {
                                if (res.status) {
                                    this.getList();
                                    this.$message({ type: 'success', message: '操作成功！'});
                                }
                            })
                        }
                    }
                });
            } else {
                this.$message({ type: 'warning', message: '请至少选中一条商机！'});
            }
        },
        // 关注
        handleLike(row) {
            const params = {
                type: 3,
                pid: row.id,
                status: Math.abs(1 - row.is_like)
            }
            star(params).then(res => {
                console.log(res);
                if (res.status) {
                    this.getList();
                    this.$message({ type: 'success', message: params.status ? '已关注' : '取消关注'});
                }
            })
        },
        // 切换分页size
        handleSizeChange(val) {
            this.search.limit = val;
            this.getList();
        },
        // 切换页数
        handleCurrentChange(val) {
            this.search.pages = val;
            this.getList();
        },
        // 重置筛选条件
        handleReset() {
            this.search = {
                user_type: '',
                keys: '',
                user: '',
                status: '',
                member_id: '',
                date: [],
                start_time: '',
                end_time: '',
                mendian_id: '',
                is_like: '0',
                pages: 1,
                limit: 10,
                total: 0
            };
            this.getList();
        },
        // 获取列表
        getList() {
            this.loading = true;
            businessList(this.search).then(res => {
                if (res.status == 1) {
                    this.dataList = res.data.list || [];
                    this.count = res.data.count;
                    this.loan = res.data.loan;
                    this.commission = res.data.commission;
                    this.search.total = Number(res.data.count);
                }
            }).finally(() => {
                this.loading = false;
            })
        },
        // 获取 options
        getOptions() {
            memberList().then(res => {
                this.memberList = res.data.list || []
            })
        },
        handleDateChange(e) {
            this.search.start_time = e ? e[0] : ''
            this.search.end_time = e ? e[1] : ''
        }
    }
}
</script>

<style lang="scss" scoped>
.tag-box {
    width: 100%;
    display: flex;
    overflow: hidden;
}
.el-tag {
    margin: 2px;
}
.number-card {
    display: flex;
    .item {
        min-width: 300px;
        padding: 10px 20px;
        border: 1px solid #eee;
        margin: 0 40px 20px 0;
        .title {
            font-size: 14px;
        }
        .number {
            font-size: 30px;
            margin-top: 5px;
        }
    }
}
</style>
